<template>
  <div id="my">
    <div class="header">
      <div class="img">
        <img
          :src="
            user.imgsrc
              ? user.imgsrc
              : user.sex == 1
              ? '/icon/男生默认头像.png'
              : '/icon/女生默认头像.png'
          "
          alt=""
        />
      </div>
      <div class="content">
        <p class="uname">{{ user.uname }}</p>
        <p class="email">{{ user.email }}</p>
      </div>
    </div>
    <div class="main">
      <div v-for="item in list" :key="item.id" class="list">
        <p>{{ item.name }}</p>
        <div v-for="i in item.ls" :key="i.id" class="ls">
          <div class="leftt">
            <div class="icon">
              <img :src="i.icon" alt="" />
            </div>
            <span>{{ i.name }}</span>
          </div>
          <div class="go" @click="go(i)">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../stores/counter";
const router = useRouter();

const useStore = useCounterStore();
const user = useStore.info;

const list = reactive([
  {
    id: 1,
    name: "个人信息",
    ls: [
      {
        id: 1,
        name: "个人资料",
        icon: "../../../public/icon/我的.png",
        path: "changeinfo",
      },
      {
        id: 2,
        name: "付款账户",
        icon: "../../../public/icon/钱包.png",
        path: "payment",
      },
      {
        id: 3,
        name: "账户安全",
        icon: "../../../public/icon/安全.png",
        path: "safe",
      },
    ],
  },
  {
    id: 2,
    name: "常规",
    ls: [
      {
        id: 1,
        name: "语言设置",
        icon: "../../../public/icon/语言.png",
        path: "language",
      },
      {
        id: 2,
        name: "推送通知",
        icon: "../../../public/icon/通知.png",
        path: "notice",
      },
      {
        id: 3,
        name: "清除缓存",
        icon: "../../../public/icon/缓存.png",
        path: "cache",
      },
    ],
  },
  {
    id: 3,
    name: "关于",
    ls: [
      {
        id: 2,
        name: "隐私策略",
        icon: "../../../public/icon/隐私.png",
        path: "privacy",
      },
      {
        id: 3,
        name: "关于我们",
        icon: "../../../public/icon/关于_o.png",
        path: "we",
      },
      {
        id: 4,
        name: "条款及条件",
        icon: "../../../public/icon/法槌.png",
        path: "article",
      },
    ],
  },
]);

const go = (ele) => {
  router.push({ path: `/${ele.path}`, query: { name: ele.name } });
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#my {
  width: 100vw;
  height: 100vh;
}

.header {
  width: 100%;
  height: 15%;
  border-bottom: 1px solid #000;
  display: flex;
}

.img {
  width: 30%;
  height: 100%;
}

.img img {
  width: 70%;
  height: 77%;
  border-radius: 50%;
  margin-left: 30%;
  margin-top: 15%;
}

.content {
  width: 70%;
  height: 100%;
  text-indent: 7%;
  line-height: 2rem;
}

.uname {
  font-size: 1.3rem;
  margin-top: 10%;
}

.list {
  width: 100%;
  margin-top: 5%;
  text-indent: 10%;
}

.list p {
  font-size: 1rem;
}

.ls {
  width: 80%;
  margin-left: 10%;
  height: 2.5rem;
  margin-top: 1%;
  line-height: 2rem;
  text-indent: 10%;
  display: flex;
  justify-content: space-between;
}

.leftt {
  width: 50%;
  height: 100%;
  display: flex;
}

.leftt span {
  display: inline-block;
  width: 70%;
  height: 100%;
  font-size: 1.2rem;
  line-height: 2.5rem;
}

.icon {
  width: 25%;
  height: 100%;
}

.icon img {
  width: 60%;
  height: 60%;
  margin-top: 20%;
}

.go {
  width: 10%;
  height: 100%;
  line-height: 2.5rem;
}
</style>